<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
    <title>村口大数据平台</title>
    <!-- 页面样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- flex样式 -->
    <link rel="stylesheet" href="css/why-flex.css">

    <!-- Echarts -->
    <script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
    <script src="./js/bmap.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3wpIft0uxU73cAl2KApfnEVK3EXZp6Lk"></script>
    <script src="js/china.js"></script>

    <!-- Vue -->
    <script src="./js/vue.js"></script>
    <!-- axios -->
    <script src="js/axios.min.js"></script>

    <!-- element样式 -->
    <!-- <link rel="stylesheet" href="./css/element.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- element组件库 -->
    <script src="js/element.js"></script>

    <!-- heightCharts -->
    <script src="./js/hightcharts/highcharts.js"></script>
    <script src="./js/hightcharts/highcharts-3d.js"></script>
    <script src="./js/hightcharts/cylinder.js"></script>
    <style>
        .BMap_cpyCtrl {
                display: none;
            }
.anchorBL {
                display: none!important;
            }

    </style>
<body>
    <div id="app">
        <div class="date">{{ nowTime }}</div>

        <!-- container -->
        <div class="container row-b">
            <div class="left col">

                <div class="top col">
                    <div class="title">再生资源数据</div>
                    <ul class="list row-b">
                        <li class="row-b" v-for="item of revive_data" :key="item.id" :style="{backgroundImage:'url(img/'+item.id+'.png)'}">
                            <img :src=`./img/${item.img}.png` alt="图片加载失败" />
                            <div class="right col-b">
                                <div class="name">{{item.title}}</div>
                                <div class="data">{{item.data}}</div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="min1 col-b">
                    <div class="title">回收垃圾数量</div>
                    <div class="circle">
                        <el-carousel @change="swch" :interval="3000" type="card" height="12.5rem" indicator-position="none">
                            <el-carousel-item v-for="item of dump" :key="item.id">
                                <div class="card row-c">
                                    <img :src=`./img/${item}.png` alt="图片加载失败">
                                </div>
                            </el-carousel-item> 
                        </el-carousel>
                    </div>
                    <div class="footer row-b">
                        <div class="col-b" v-for="item of count" :key="item.id">
                            <div class="color_n">{{ item.name }}</div>
                            <div class="color_d">{{ item.data }}Kg</div>
                        </div>
                    </div>

                </div>

                <div class="min2 row-b">
                    <div class="svg">总计</div>
                    <div class="col-c_">
                        <div class="color_n">累计回收量</div>
                        <div class="color_d">{{ allCount }}Kg</div>
                    </div>
                    <div class="col-c_">
                        <div class="color_n">今日回收量</div>
                        <div class="color_d">{{ allDay }}Kg</div>
                    </div>
                </div>

                <div class="bottom col-b">
                    <div class="title">积分消费</div>
                    <div class="bottom row-b">
                        <div id="consumption"></div>
                        <div class="summarize col-b_">
                            <div class="col-b_">
                                <div class="color_n">新增积分</div>
                                <div class="color_d">{{ addPoints }}分</div>
                            </div>
                            <div class="col-b_">
                                <div class="color_n">兑换积分</div>
                                <div class="color_d">{{ onLineShop }}分</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Mid -->
            <div class="mid col-b">
                <div class="top row-c">
                    <div id="map"></div>
                </div>

                <div class="img">
                    <el-carousel :interval="4000" type="card" height="14vh" indicator-position="none">
                        <el-carousel-item v-for="item in count_img" :key="item.id">
                            <img :src="item.photoUrl" :title="item.name" alt="图片已失效">
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <div class="bottom">
                    <div class="name">投放记录</div>
                    <div class="table">
                        <div class="head row-b">
                            <div style="width: 30%;">所属小区</div>
                            <div style="width: 20%;">时间</div>
                            <div style="width: 20%;">类型</div>
                            <div style="width: 10%;">重量</div>
                            <div style="width: 10%;">积分</div>
                            <div style="width: 10%;">姓名</div>
                        </div>
                        <div class="body">
                            <table>
                                <tr align="center" class="item" v-for='item of delivery_data' :key="item.id">
                                    <td style="width: 30%;">{{ item.communityName }}</td>
                                    <td style="width: 20%;">{{ item.time }}</td>
                                    <td style="width: 20%;">{{ item.type }}</td>
                                    <td style="width: 10%;">{{ item.weight }}KG</td>
                                    <td style="width: 10%;">{{ item.integral }}</td>
                                    <td style="width: 10%;">{{ item.name }}</td>
                                </tr>
                            </table>
                        </div>

                    </div>

                </div>
            </div>

            <!-- Right -->
            <div class="right">
                <div class="header col-b">
                    <div class="title">垃圾分类小区对比</div>
                    <div id="circle"></div>
                </div>
                <div class="body col-b">
                    <div class="title">分类正确率</div>
                    <div class="legend row-b">
                        <div><span class="low"></span>分类差</div>
                        <div><span class="medium"></span>分类良好</div>
                        <div><span class="height"></span>分类优秀</div>
                    </div>
                    <div class="cre row-b">
                        <div>
                            <div id="correct1"></div>
                            <div class="b_text">上月分类正确率</div>
                        </div>
                        <div>
                            <div id="correct2"></div>
                            <div class="b_text">本月分类正确率</div>
                        </div>
                    </div>
                    

                </div>
                <div class="leg col-b">
                    <div class="title row-c">分类参与率</div>
                    <div class="legend row-b">
                        <div><span class="y"></span>已参与垃圾分类</div>
                        <div><span class="n"></span>未参与垃圾分类</div>
                    </div>
                    <div class="d row-b">
                        <div>
                            <div id="participate1" style="left: -2vw;"></div>
                            <div class="b_text">上月分类参与率</div>
                        </div>
                        
                        <div>
                            <div id="participate2" style="right:-2vw;"></div>
                            <div class="b_text">本月分类参与率</div>
                        </div>
                    </div>

                </div>
                <div class="footer col-b">
                    <div class="title">生活垃圾趋势图</div>
                    <div class="legend row-b">
                        <div><span class="y"></span>易腐垃圾</div>
                        <div><span class="n"></span>其他垃圾</div>
                    </div>
                    <div class="row-c">
                        <div id="line"></div>
                    </div>
                    
                </div>
            </div>
        </div>

        <div class="Hbtn row-c" @click="Hbtn" title="点击切换地区" style="color: red;z-index: 999999999999999;">点击切换地区</div>

        <el-dialog
            title="提示" width="30%" center
            :visible.sync="centerDialogVisible">    

            <div class="search row">
                <span>请选择地区：</span>
                <el-cascader :props="area" v-model="key" clearable></el-cascader>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="search" plain>确 定</el-button>
            </span>
        </el-dialog>


    </div>

</body>

</html>

<script src="js/index.js"></script>